<template>
  <view class="article-box">
    <view>{{articleInfo.title}}</view>
    <view class="article-user u-flex-between u-flex-y-center ">
      <view class="u-flex-y-center">
        <image :src="prefixURL(articleInfo.user.avatar)" class="house-avatar" mode=""></image>
        <text>{{articleInfo.user.nickname}}</text>
      </view>
      <text>{{articleInfo.userlikes}}</text>
    </view>
    <view class="gap"></view>
    <view class="u-flex u-flex-items-end u-flex-between u-m-t-20">
      <image src="@/static/images/01_9ewfug.png" class="share-img" mode=""></image>
      <view class="u-flex-y-center" @click="_articleLikes">
        <image src="@/static/images/01_31dfgas.png" v-if="articleInfo.is_collect" class="sc-icon" mode=""></image>
        <image src="@/static/images/01_31dfgassdv.png" v-else class="sc-icon" mode=""></image>
        <text class="share-text">收藏({{articleInfo.likes}})</text>
      </view>
      <button class="share-btn" open-type="share">
        <view class="u-flex-y-center">
          <image src="@/static/images/01_31gth.png" class="share-icon" mode=""></image>
          <text class="share-text">分享</text>
        </view>
      </button>
    </view>
  </view>
  <view class="article-house">
    <view class="title">推荐房源</view>
    <house-item :item="articleInfo.house" customStyle="background:#fff;margin:20rpx" :imageWidth="234"
      imageHeight="192">
      <template #right>
        <view class="u-flex-between u-flex-column u-flex-fill">
          <view class="house-name u-flex-y-center">
            <view class="house-tag" v-if="articleInfo?.house?.label"> {{articleInfo.house.label}}</view>
            <view class="u-flex-1 u-line-1">{{articleInfo.house.title}}</view>
          </view>
          <view class="house-desc" v-if="articleInfo.house.description">“{{articleInfo.house.description}}”</view>
          <view class="house-info">“{{articleInfo.house.house_type_text}}”</view>
          <view class="house-price u-flex-y-center u-flex-between">
            <text>市场价：{{articleInfo.house.market_price}}万</text>
            <text>优惠价：{{articleInfo.house.price}}万</text>
          </view>
        </view>
      </template>
    </house-item>

  </view>
  <view class="article-house">
    <view class="title">文章详情</view>
    <view class="article-content">{{articleInfo.content}}</view>
  </view>
  <back-page></back-page>
</template>

<script setup>
  import { getCache, prefixURL, setCache } from '../../../util/util';
  import { onMounted, ref } from 'vue';
  import houseItem from '@/components/house-item/house-item.vue';
  import { articleDetail, articleLikes } from '../../../config/api';
  import { onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
  const props = defineProps({
    id: {
      type: [String, Number],
      default: ''
    },
    user_id: {
      type: [String, Number],
      default: ''
    }
  })
  const articleInfo = ref({})
	
	if(props.user_id){
		setCache('invite',props.user_id)
	}
  onMounted(() => {
    _articleDetail()
  })
  // 收藏
  const _articleLikes = () => {
    articleLikes({ id: articleInfo.value.id }).then(res => {
      uni.$u.toast(res.msg, { mask: true })
      articleInfo.value.is_collect = !articleInfo.value.is_collect
    })
  }
  onShareTimeline(() => {
    let userInfo = getCache('userInfo')
    return {
      path: `pages/index/houseHot/articleDetail?id=${props.id}&user_id=${userInfo.user_id}`
    }
  })
  onShareAppMessage((e) => {
    let userInfo = getCache('userInfo')
    return {
      path: `pages/index/houseHot/articleDetail?id=${props.id}&user_id=${userInfo.user_id}`
    }
  })
  const _articleDetail = () => {
    articleDetail({ id: props.id, user_id: props.user_id }).then(res => {
      console.log(res)
      articleInfo.value = res.data
    })
  }
</script>

<style lang="scss" scoped>
  .article-box {
    padding: 22rpx;
    background: #fff;
    border-radius: 16rpx;
    font-size: 32rpx;
    font-weight: 800;
    margin: 20rpx;

    .gap {
      margin-top: 20rpx;
      border-top: 1rpx solid rgba(0, 0, 0, 0.08);
    }

    .article-user {
      font-size: 26rpx;
      color: #333;
      font-weight: 500;
      margin-top: 20rpx;

      .house-avatar {
        width: 60rpx;
        height: 60rpx;
        border-radius: 50%;
        margin-right: 10rpx;
      }
    }

    .share-img {
      width: 322rpx;
      height: 72rpx;
    }

    .sc-icon {
      width: 34rpx;
      height: 34rpx;
      margin-right: 12rpx;
    }

    .share-icon {
      width: 30rpx;
      height: 30rpx;
      margin-right: 12rpx;
    }

    .share-text {
      font-size: 26rpx;
      font-weight: 500;
      color: #000;
    }
  }

  .article-house {
    .title {
      margin: 20rpx;
      font-size: 30rpx;
      font-weight: 800;
    }
  }

  .house-name {
    font-size: 26rpx;
    color: #333;
    font-weight: 800;

  }

  .house-info {
    font-size: 24rpx;
    font-weight: 500;
    color: #666;
  }

  .house-desc {
    font-size: 22rpx;
    color: #E47117;
  }

  .house-price {
    color: #DF0F0F;
    font-weight: 800;
    font-size: 24rpx;
  }

  .article-content {
    background: #fff;
    padding: 20rpx;
    border-radius: 16rpx;
    margin: 20rpx;
  }
</style>